//
// Shared Bootstrap variables for public and admin.
// --------------------------------------------------


// Color system

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #aab5bf !default;
$gray-600: #8d9ba9 !default;
$gray-700: #596167 !default;
$gray-800: #393f46 !default;
$gray-900: #22262a !default;
$black:    #000 !default;

$blue:    null !default;
$indigo:  null !default;
$purple:  null !default;
$pink:    null !default;
$red:     null !default;
$orange:  null !default;
$yellow:  null !default;
$green:   null !default;
$teal:    null !default;
$cyan:    null !default;

$colors:  ( "black": $black );

$primary:       null !default;
$secondary:     null !default;
$success:       null !default;
$info:          null !default;
$warning:       null !default;
$danger:        null !default;
$light:         null !default;
$dark:          null !default;

$theme-color-interval:		8%;
$yiq-contrasted-threshold:  null !default;
$yiq-text-dark:             null !default;
$yiq-text-light:            $white !default;
$min-contrast-ratio:        2.2 !default;


// Options

$prefix:                        '';
$enable-rounded:                true !default;
$enable-shadows:                true !default;
$enable-gradients:              false !default;
$enable-transitions:            true !default;
$enable-grid-classes:           true !default;
$enable-responsive-font-sizes:  null !default;
$enable-important-utilities:    true !default;
$enable-rfs:                    null !default;
$enable-negative-margins:       true !default;


// Body

$body-bg:                   $white !default;
$body-color:                null !default;
$body-secondary-color:      null !default;
$body-tertiary-color:       null !default;


// Links

$link-color: null !default;


// Components

$line-height-base:            null !default;
$line-height-lg:              null !default;
$line-height-sm:              null !default;

$border-width:                null !default;
$border-style:                null !default;
$border-color:                null !default;
$border-color-translucent:    rgba($black, .125) !default;

$border-radius:               .375rem !default;
$border-radius-sm:            .25rem !default;
$border-radius-lg:            .5rem !default;
$border-radius-xl:            .75rem !default;
$border-radius-xxl:           1.5rem !default;
$border-radius-pill:          50rem !default;
$rounded-pill:                50rem !default;

$box-shadow-inset:            null !default;
$box-shadow-sm:               0 calc(2px * var(--shadow-yoffset, 1)) 16px -2px rgba(var(--shadow-colorbase-rgb), calc(var(--shadow-intensity) * 0.12)), 
                              0 calc(2px * var(--shadow-yoffset, 1)) 3px -2px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.15)) !default;
$box-shadow:                  0 calc(6px * var(--shadow-yoffset, 1)) 24px -5px rgba(var(--shadow-colorbase-rgb), calc(var(--shadow-intensity) * 0.12)), 
                              0 calc(5px * var(--shadow-yoffset, 1)) 12px -5px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.17)) !default;
$box-shadow-lg:               0 calc(10px * var(--shadow-yoffset, 1)) 40px -4px rgba(var(--shadow-colorbase-rgb), calc(var(--shadow-intensity) * 0.14)), 
                              0 calc(12px * var(--shadow-yoffset, 1)) 28px -12px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.2)) !default;

$embed-responsive-aspect-ratios: ( 
    (21 9), 
    (16 9), 
    (16 10), 
    (4 3), 
    (1 1),
    (9 16)
);

$focus-ring-width:            2px !default;
$focus-ring-opacity:          1 !default;
$focus-ring-color:            rgba(var(--link-color-rgb), $focus-ring-opacity) !default;
$focus-ring-blur:             0 !default;
$focus-ring-box-shadow:       0 0 $focus-ring-blur $focus-ring-width $focus-ring-color, inset 0 0 0 $focus-ring-width hsla(0,0%,100%, 0.92) !default;

$transition-base:             all 0.125s ease-in-out !default;


// Typo

$font-family-base:            null !default;

$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-medium:          600 !default;
$font-weight-semibold:        600 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          bolder !default;

$h1-font-size:                null !default;
$h2-font-size:                null !default;
$h3-font-size:                null !default;
$h4-font-size:                null !default;
$h5-font-size:                null !default;
$h6-font-size:                null !default;

$display1-size:               null !default;
$display2-size:               null !default;
$display3-size:               null !default;
$display4-size:               null !default;

$hr-opacity:                  .12 !default;


// Tables

$table-accent-bg:               rgba($black, .03) !default;
$table-hover-bg:                rgba($black, .05) !default;


// Buttons + Forms

$input-btn-padding-x:         0.75rem !default; // --> 12px
$input-btn-padding-y:         0.5rem !default; // --> 8px
$input-btn-font-family:       null !default;

$input-btn-focus-width:       3px !default;

$input-btn-padding-x-sm:      0.625rem !default; // --> 10px
$input-btn-padding-y-sm:      0.375rem !default; // --> 6px

$input-btn-padding-x-lg:      1.25rem !default; // --> 20px
$input-btn-padding-y-lg:      0.625rem !default; // --> 10px
$input-btn-font-size-lg:      1rem !default; // --> 16px

$input-box-shadow:            none !default;
$input-focus-box-shadow:      none !default;

$input-transition:            none !default;


// Buttons

$btn-active-box-shadow:			inset 0 3px 5px rgba($black, .125) !default;
$btn-focus-box-shadow:          $focus-ring-box-shadow !default;
$btn-transition:                color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out, box-shadow .1s ease-in-out !default;
$btn-disabled-opacity:          0.5 !default;

$btn-hover-bg-shade-amount:       15% !default;
$btn-hover-bg-tint-amount:        15% !default;
$btn-hover-border-shade-amount:   20% !default;
$btn-hover-border-tint-amount:    10% !default;
$btn-active-bg-shade-amount:      20% !default;
$btn-active-bg-tint-amount:       20% !default;
$btn-active-border-shade-amount:  25% !default;
$btn-active-border-tint-amount:   10% !default;


// Form Check

$form-check-input-border:               1px solid rgba($black, .15);
$form-check-input-focus-border:         rgba(var(--form-check-checked-bg-rgb), 0.5);
$form-check-input-focus-box-shadow:     0 0 0 0.2rem rgba(var(--form-check-checked-bg-rgb), 0.25);
$form-check-transition:                 box-shadow 0.12s ease-in-out;


// Form Switch

$form-switch-color:                     $white;
$form-switch-width:                     2em;
//$form-switch-padding-start:             calc(var(--form-switch-width) + 0.75em);
$form-switch-bg-image:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><defs><filter id='shadow'><feDropShadow dx='0' dy='0' stdDeviation='0.6' flood-opacity='0.3' /></filter></defs><circle r='3' fill='#{$form-switch-color}' style='filter:url(#shadow)'/></svg>");
//$form-switch-border-radius:             $form-switch-width;
$form-switch-transition:                background-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out, background-position .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

$form-switch-focus-color:               $white;
$form-switch-focus-bg-image:            $form-switch-bg-image;

$form-switch-checked-color:             $white;
$form-switch-checked-bg-image:          $form-switch-bg-image;
//$form-switch-checked-bg-position:       right center;


// Badge

$badge-padding-y:               (1 / 6) * 1em !default;
$badge-padding-x:               0.5em !default;
$badge-pill-padding-x:          0.85em !default;
$badge-content-shift:           0px !default;


// Dropdown

$dropdown-min-width:            10rem !default;
$dropdown-font-size:            14px !default;
$dropdown-bg:                   $white !default;
$dropdown-border-width:         1px !default;


// Placeholders

$placeholder-opacity-max:       .5 !default;
$placeholder-opacity-min:       .2 !default;



// Pagination Mini
// --------------------------------------------------

$pagination-padding-y-xs:           0 !default;
$pagination-padding-x-xs:           6px !default;



// Modal
// --------------------------------------------------

$modal-footer-bg:                   rgba($black, 0.04) !default;
$modal-footer-margin-between:       0.375rem !default;
$modal-inner-padding:               1.5rem !default;
$modal-header-padding-x:            1.5rem !default;
$modal-header-padding-y:            1rem !default;
$modal-content-border-width:        0px !default;
$modal-content-border-color:        rgba($black, .06) !default;
$modal-backdrop-bg:                 $black !default;
$modal-backdrop-opacity:            .6 !default;
$modal-transition:                  all 0.2s ease-out !default;
$modal-content-border-radius:       var(--border-radius-xl) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs:       var(--box-shadow-md) !default;
$modal-content-box-shadow-sm-up:    var(--box-shadow-lg) !default;


// Navs

$nav-pills-link-active-color:       $white;


// Close

$btn-close-focus-shadow:            none;
